<template>
  <view class="container">
    <!-- 顶部banner -->
    <ne-swiper />
    <!-- 功能导航 -->
    <nav-list :options="options" />
    <view class="section">
      <ne-tabs :tabs="tabs" @change="tabChange" />
      <lecture-card
        v-for="item in dataSource"
        :key="item.indexCode"
        :row="item"
      />
      <van-empty v-if="!dataSource.length" description="暂无数据" />
    </view>
  </view>
</template>

<script>
import NavList from '../../components/NavList.vue'
import NeTabs from '../../components/NeTabs.vue'
import LectureCard from './components/LectureCard.vue'
import NeSwiper from '../../components/NeSwiper.vue'
import pagingMixin from '../../mixins/pagingMixin'
import { getDict } from '../../api/tbDict'
export default {
  name: 'wx_pages_djzh_index',
  components: { NavList, NeTabs, LectureCard, NeSwiper },
  mixins: [pagingMixin],
  data() {
    return {
      itemSubType: '',
      restfulApi: '/tbMoralEducation/page',
      tabs: [],
      options: [
        {
          url: '/pages/djzh/culturePage',
          title: '文化讲堂',
          icon: '/image/menu-13.png',
        },
        {
          url: '/pages/djzh/massPage',
          title: '群众活动',
          icon: '/image/menu-14.png',
        },
        {
          url: '1##1',
          title: '图书角',
          icon: '/image/menu-15.png',
        },
        {
          url: '/pages/djzh/timeRecall',
          title: '时光回忆',
          icon: '/image/menu-16.png',
        },
      ],
      educationList: [],
    }
  },
  methods: {
    tabChange(index) {
      this.itemSubType = this.tabs[index].value
      this.search({ itemSubType: this.itemSubType, approvalStatus: '1' })
    },
  },
  onLoad() {
    getDict('item_sub_type').then((res) => {
      this.tabs = res.data.map((item) => ({
        name: item.dictValue,
        value: item.dictKey,
      }))
      this.itemSubType = this.tabs[0].value
      this.search({ itemSubType: this.itemSubType, approvalStatus: '1' })
    })
  },
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #ffffff;
  padding: 12px;
  overflow: auto;
}

/* Banner */
.banner {
  width: 100%;
  height: 180px;
  background-color: #0052d9;
}

/* 法治讲堂 */
.section {
  margin-top: 20 rpx;
}

.section-title {
  font-size: 34 rpx;
  color: $uni-color-primary;
  font-weight: 500;
  margin: 20 rpx 0;
  display: inline-block;
}

.article-list {
  display: flex;
  flex-direction: column;
  gap: 20 rpx;
}
</style>
